<template>
    <!-- 播放详情页 -->
    <transition name="fade">
        <div class="box ">
            <div
                class="background-flitter"
                :style="`background-image: url(${currentSong.image})`"
            >
            </div>
            <div class="song-cover-lyric">
                <div class="disc-continer">
                    <div
                        class="poster"
                        ref="rotate"
                    >
                        <img
                            :src="currentSong.image"
                            alt=""
                        />
                    </div>
                    <div class="song-name">{{ currentSong.name }}</div>
                    <div class="song-artistsName">{{ currentSong.singer }}</div>
                </div>
                <!-- 歌词 -->
                <div class="lyric">
                    <div>

                        <div
                            v-if="lyric.length>0"
                            ref="lyric"
                        >

                            <div
                                class="musicLyric"
                                v-for="(item, index) in lyric"
                                :key="index"
                            >
                                <p :class="index===lyricIndex?'colorLight':''">{{item.text}}</p>
                            </div>
                        </div>
                        <p
                            style=" margin: 100px 0;"
                            v-else
                        >暂无歌词</p>
                    </div>
                </div>
            </div>
        </div>
    </transition>
</template>

<script>
import { mapGetters } from 'vuex'
// import Mscroll from '../lyricScroll'
export default {
    data() {
        return {
            duration: 0,
            color: "#fff", //文案默认颜色
            colorLight: "#40ce8f", //文案高亮色
            fontSize: "16px", //文案字体大小
            lineHeight: "42", //每段行高
            paddingTop: "300px", //高亮文案部分居中
        }
    },
    components: {
        // Mscroll,
    },
    created() {
    },
    mounted() {
        if (this.playing) {
            this.$refs.rotate.style.animationPlayState = "running";
        } else {
            this.$refs.rotate.style.animationPlayState = "paused";
        }
    },
    computed: {

        ...mapGetters([
            'playList',
            'currentSong',
            'playing',
            'currentIndex',
            'mode',
            'sequenceList',
            'lyric',
            'currentTime',
            'lyricIndex'
        ])
    },
    watch: {

        // 监听歌曲内容变化
        currentSong(newSong, oldSong) {
            if (!newSong.id || !newSong.url || newSong.id === oldSong.id) {
                return
            }

        },
        // 歌词滚动
        lyricIndex() {
            this.$nextTick(() => {
                this.$refs.lyric.style.transform = `translateY(${170 - (45 * (this.lyricIndex + 1))}px)`
            })
        },
        // 监听播放状态
        playing() {
            this.$nextTick(() => {
                if (this.playing) {
                    this.$refs.rotate.style.animationPlayState = "running";
                } else {
                    this.$refs.rotate.style.animationPlayState = "paused";
                }

            })
        }
    },
    methods: {

    },
}
</script>

<style lang="less" scoped>
.box {
    min-width: 1080px;
    width: 100%;
    height: 650px;
    position: relative;
    background: rgba(15, 15, 15, 0.4);
    overflow: hidden;
    .background-flitter {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
        filter: blur(8px);
        opacity: 0.7;
        overflow: hidden;
        box-sizing: border-box;
    }
    .song-cover-lyric {
        position: relative;
        width: 100%;
        height: 100%;
        padding-bottom: 72px;
        box-sizing: border-box;
        display: flex;
        overflow: hidden;
        .disc-continer {
            width: 50%;
            height: 100%;
            position: relative;
            .poster {
                position: relative;
                width: 280px;
                height: 280px;
                border-radius: 50%;
                background: rgba(255, 255, 255, 0.3);
                left: 50%;
                top: 60px;
                margin-left: -140px;
                box-shadow: 0 0 0 12px rgba(255, 255, 255, 0.4);
                animation: animations1 12s linear infinite forwards;
                animation-play-state: paused;
                overflow: hidden;
                margin-bottom: 110px;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
            .song-name {
                width: 100%;
                height: 30px;
                text-align: center;
                font-size: 26px;
                font-weight: 600;
                color: #fff;
                line-height: 30px;
            }
            .song-artistsName {
                width: 100%;
                height: 30px;
                text-align: center;
                font-size: 20px;
                font-weight: 600;
                color: #fff;
                line-height: 30px;
                margin-top: 30px;
            }
            @keyframes animations1 {
                from {
                    transform: rotate(0deg);
                }
                to {
                    transform: rotate(360deg);
                }
            }
        }
        .lyric {
            width: 50%;
            height: 550px;
            position: relative;
            left: 10%;
            margin-top: 40px;
            overflow: auto;
            transition: scrollTop 0.2s;
            .musicLyric {
                box-sizing: border-box;
                overflow: hidden;
            }
            p {
                width: 500px;
                margin: 12px 0;
                font-size: 18px;
                color: #fff;
            }
            .colorLight {
                color: #40ce8f;
            }
        }
    }
}
</style>